<template>
    <div class="item" ref="actionItemArea">
        <ComplexTimeRange v-bind:value="rules[index].time" style="margin-bottom: 5px;"></ComplexTimeRange>
        <a-row type="flex" align="middle" style="margin-bottom: 5px;">
            <a-col :xs="2" :sm="2" :md="2" :lg="2" style="padding-right: 5px">
              <a-switch v-model="rules[index].done" size="large" checked-children="做过" un-checked-children="未做过"/>
            </a-col>
            <a-col :xs="4" :sm="4" :md="4" :lg="4" style="padding-right: 5px">
                <a-select v-model="rules[index].event">
                    <a-select-opt-group label="默认事件">
                        <a-select-option v-if="item.type === 0" v-for="item in events" :value="item.name" :key="item.name">{{ item.displayName }}</a-select-option>
                    </a-select-opt-group>
                    <a-select-opt-group label="自定义事件">
                        <a-select-option v-if="item.type === 1" v-for="item in events" :value="item.name" :key="item.name">{{ item.displayName }}</a-select-option>
                    </a-select-opt-group>
                </a-select>
            </a-col>
            <a-col v-if="rules[index].done" :xs="1" :sm="1" :md="1" :lg="1" style="text-align: center; padding-right: 5px">
                的
            </a-col>
            <a-col v-if="rules[index].done" :xs="3" :sm="3" :md="3" :lg="3" style="padding-right: 5px">
                <a-select v-model="rules[index].measure.name" v-on:on-change="changeMeasure">
                    <a-select-option v-for="item in eventMeasures" :value="item.name" :key="item.name">{{ item.displayName }}</a-select-option>
                </a-select>
            </a-col>
            <a-col v-if="rules[index].done" :xs="3" :sm="3" :md="3" :lg="3" style="padding-right: 5px">
                <a-select v-model="rules[index].operator" @change="changeOperator">
                    <a-select-option v-for="item in operatorList" :value="item.name" :key="item.name">{{ item.displayName }}</a-select-option>
                </a-select>
            </a-col>
            <a-col v-if="rules[index].done" :xs="5" :sm="5" :md="5" :lg="5" style="padding-right: 5px">
                <ComplexNumberValue v-model="rules[index].values" v-bind:between="rules[index].operator === 'between'" v-on:input="changeComplexNumber"></ComplexNumberValue>
            </a-col>
            <a-col :xs="6" :sm="6" :md="6" :lg="6" style="padding-right: 5px">
                <a-button icon="minus" v-if="rules.length > 0" v-on:click="$parent.removeItem(index)" style="margin-right: 5px"></a-button>
                <a-button icon="plus" v-if="isLast()" v-on:click="$parent.addItem" style="margin-right: 5px"></a-button>
                <a-button v-if="rules[index].filter.rules.length === 0" v-on:click="addRule" style="margin-right: 5px">添加筛选</a-button>
            </a-col>
        </a-row>
        <MultiLevelFilter ref="filter" v-model="rules[index].filter" v-bind:properties="properties" v-bind:datasourceId="datasourceId" v-on:remove="demote"></MultiLevelFilter>
    </div>
</template>

<script>
    import ComplexTimeRange from "./ComplexTimeRange";
    import ComplexNumberValue from "./ComplexNumberValue"
    import CommonFilterGroup from "../../../components/CommonFilterGroup"
    import MultiLevelFilter from "../../../components/Filter/MultiLevelFilter";
    export default {
        name: "UserAction",
        components: {MultiLevelFilter, ComplexTimeRange,ComplexNumberValue,CommonFilterGroup},
        props: {
            index: Number,
            rules: Array,
            events: Array,
            properties: Array,
            measures: Array,
            datasourceId: Number
        },
        data: function () {
            return {
                done: "1",
            }
        },
        computed: {
            eventMeasures: function() {
                let eventMeasures = [];
                for(let i = 0; i < this.measures.length; i++) {
                    eventMeasures.push({
                        name: this.measures[i].name,
                        displayName: this.measures[i].displayName
                    })
                }
                return eventMeasures;
            },
            operatorList: function () {
                return [
                    {
                        name: 'equal',
                        displayName: '等于',
                        valueType: 'input'
                    },
                    {
                        name: 'notEqual',
                        displayName: '不等于',
                        valueType: 'input'
                    },
                    {
                        name: 'greater',
                        displayName: '大于'
                    },
                    {
                        name: 'greaterOrEqual',
                        displayName: '大于等于'
                    },
                    {
                        name: 'less',
                        displayName: '小于'
                    },
                    {
                        name: 'lessOrEqual',
                        displayName: '小于等于'
                    },
                    {
                        name: 'between',
                        displayName: '区间'
                    }
                ];
            }
        },
        methods: {
            //条件组降级：如果条件组只剩一个条件，那么移除当前条件组，将剩下的这个条件合并到上级条件组中。
            demote: function (index) {
                let originalFilter = this.rules[this.index].filter;
                let filterIndex = originalFilter.filters.findIndex((item) => {
                    return item.index === index;
                });
                if(filterIndex !== -1) {
                    let filter = originalFilter.filters[filterIndex];
                    originalFilter.filters.splice(filterIndex, 1);
                    originalFilter.condition = filter.condition;
                    filter.rules.forEach((item, index) => {
                        originalFilter.rules.push(item);
                    });
                    filter.filters.forEach((item, index) => {
                        originalFilter.filters.push(item);
                    });
                }
            },
            addRule() {
                this.$refs.filter.addRule();
            },
            getInitialValue: function() {
                this.done =  this.rules[this.index].done ? 1 : 0;
            },
            changeDone: function(selectedValue) {
                this.rules[this.index].done = selectedValue === 1;
            },
            changeMeasure: function(selectedValue) {
                for (let i = 0; i < this.measures.length; i++) {
                    if(this.measures[i].name === this.rules[this.index].measure.name) {
                        this.rules[this.index].measure.value = this.measures[i].value;
                        break;
                    }
                }
            },
            isLast: function() {
                return this.rules.length === (this.index + 1);

            },
            addFilterItem: function() {
                this.$refs.filterGroup.addItem();
                this.updateItemHeight();
            },
            updateItemHeight: function () {
                this.$nextTick(() => {
                    this.$parent.updateFilterItemHeight(this.index, this.$refs.actionItemArea.offsetHeight);
                })
            },
            onFilterHeightChange: function () {
                // this.$emit("change-height");
                this.updateItemHeight();
            },
            changeComplexNumber: function ( values) {
              this.rules[this.index].values = values
            },
            changeOperator(option){
              if (option === 'between'){
                this.rules[this.index].values = [0,0]
              }else {
                this.rules[this.index].values = [0]
              }
            }
        },
        watch: {},
        created() {
            this.getInitialValue();
            // this.updateItemHeight();
        },
        mounted() {
            this.updateItemHeight();
        }
    }
</script>

<style scoped>
    .item {
        margin: 0px 0px 10px 0px;
        background: rgb(255,255,255);
        padding: 5px;
        border: 1px solid  #54ba52;
    }
</style>
